import './C2banner.less';
import { observer } from 'mobx-react';

import { Button, Input, Select, Table, Space, Image,Pagination } from 'antd';
import { useHistory } from 'react-router-dom';
import React, { useState, useEffect } from 'react';
import http from '../../utils/http';

//history跳转
const C2banner = () => {
    const [list, setList] = useState([]);
    const [page, setPage] = useState(1);
    const [pageSize, setPageSize] = useState(4);
    const [total, setTotal] = useState(0);

    //输入框
    const [inp,setInp]=useState('');
    const inpChange=(e)=>{
        setInp(e.target.value);
    }
    //下拉框
    const [selList,setSelList]=useState([]);
    const [selValue,setSelValue]=useState('');
    //搜索按钮
    const queryLike=()=>{
        queryAllBanner(page,pageSize);
    }
    useEffect(() => {
        //获取列表信息
        queryAllBanner(page,pageSize);
        //填入下拉框
        http({
            url: '/yanghao/getAllGoods',
            method: 'get'
        }).then(res => {
            setSelList(res.data);
        })
    }, [])
    //下拉框
    const { Option } = Select;

    function onChange(value) {
        // console.log(value);
        setSelValue(value);
    }

    function onSearch(val) {
        console.log('search:', val);
    }
    function queryAllBanner(page,pageSize){
        //查询店铺列表
        http({
            url: '/yanghao/queryAllBanner',
            method: 'get',
            data: {
                page,
                pageSize,
                inp,
                selValue
            }
        }).then(res => {
            setList(res.data.data);
            setTotal(res.data.count);
        })
    }
    //表格
    const { Column, ColumnGroup } = Table;
    //分页点击页码
    let pageChange = (page, pageSize) => {
        setPage(page);
        queryAllBanner(page,pageSize);
    }
    const his = useHistory();
    let updateState=(row)=>{
        let state=0;
        if(row.state==0){
            state=1;
        }else if(row.state==1){
            state=0;
        }
        console.log(state);
        http({
            url:'/yanghao/editBannerState',
            method:'post',
            data:{
                id:row.id,
                state
            }
        }).then(res=>{
            queryAllBanner(page,pageSize);
        })
    }
    let edit = (row) => {
        sessionStorage.setItem('bannerId',row.id);
        his.push('/admin/editbanner');
    }
    let del = (row) => {
        console.log(row);
        http({
            url:'/yanghao/delBanner',
            method:'post',
            data:{
                id:row.id
            }
        }).then(res=>{
            queryAllBanner(page,pageSize);
        })
    }
    let addBanner = () => {
        his.push('/admin/addbanner');
    }
    return (
        <div className="big-card">
            <div className="card-header">
                <h2>C端BANNER</h2>
            </div>
            <div className="details yh">

                <div>
                    <Button type="primary" className='font-sm' onClick={() => addBanner()}>添加banner</Button>
                </div>
                <div className='d-f x-l py-2 y-c'>
                    <div className='d-f y-c'>
                        <span className='px-2 font-sm'>banner名称</span>
                        <Input value={inp} onChange={(e)=>inpChange(e)} placeholder="请输入banner名称" className='w-50 font-sm' />
                    </div>
                    <div>
                        <span className='font-sm px-2'>链接对象</span>
                        <Select
                            className='font-sm'
                            size='middle'
                            showSearch
                            style={{ width: 200 }}
                            placeholder="全部"
                            optionFilterProp="children"
                            onChange={onChange}
                            onSearch={onSearch}
                            filterOption={(input, option) =>
                                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            {/* <Option value="jack">Jack</Option>
                            <Option value="lucy">Lucy</Option>
                            <Option value="tom">Tom</Option> */}
                            {
                                selList.map((v, i) => {
                                    return <Option key={i} value={v.name}>{v.name}</Option>
                                })
                            }
                        </Select>
                    </div>
                    <div>
                        <Button onClick={()=>queryLike()} type="primary" className='font-sm px-2 mx-2'>搜索</Button>
                        <span className='font-sm col'>清除筛选条件</span>
                    </div>
                </div>
                <div className='mx-2'>
                    <Table
                        dataSource={list}
                        id='tables'
                        rowKey='id'
                        pagination={false}
                    >
                        <Column title="banner名称" dataIndex="name" key="name" />
                        <Column title="banner图" key='bannerImageUrl'
                            render={(t, v) => (
                                <Space size="middle">
                                    <div className='d-f y-c'>
                                        <Image src={v.bannerImageUrl} width={50} height={50}></Image>
                                    </div>
                                </Space>
                            )}
                        />
                        <Column title="链接对象" key="storeType"
                            render={(t, v) => (
                                <Space size="middle">
                                    <span className='font-sm'>{v.storeType == 0 ? '所有店铺' : '指定店铺'}</span>
                                </Space>
                            )}
                        />
                        <Column title="描述" dataIndex="discribe" key="discribe" />
                        <Column title="创建时间" dataIndex="createTime" key="createTime" />
                        <Column title="链接" key="goodsId"
                            render={(t, v) => (
                                <Space size="middle">
                                    {!v.goodsId ? '无' :
                                        <div className='d-f y-c'>
                                            <Image src={v.goodsImageUrl} width={50} height={50}></Image>
                                            <div className='d-f f-c y-c'>
                                                <span className='font-sm'>{v.information}</span>
                                                <span className='font-sm'>建议售价:<span className='red'>￥{v.sellPrice}</span></span>
                                            </div>
                                        </div>
                                    }
                                </Space>
                            )}
                        />
                        <Column
                            title="状态"
                            dataIndex="state"
                            key="state"
                            render={(i, v) => (
                                <Space size="middle">
                                    <a className={v.state == 0 ? '' : 'red'} onClick={()=>updateState(v)}>{v.state == 0 ? '启用' : '禁用'}</a>
                                </Space>
                            )}
                        />
                        <Column
                            title="操作"
                            key="action"
                            render={(i, v) => (
                                <Space size="middle">
                                    <a onClick={() => edit(v)}>编辑</a>
                                    <a onClick={() => del(v)}>删除</a>
                                </Space>
                            )}
                        />
                    </Table>
                    <div className='d-f x-r py-1'>
                        <Pagination
                            defaultCurrent={1}
                            defaultPageSize={pageSize}
                            current={page}
                            total={total}
                            showSizeChanger
                            pageSizeOptions={[pageSize, pageSize * 2, pageSize * 3]}
                            onChange={(page, pageSize) => pageChange(page, pageSize)}
                        />
                    </div>
                </div>
            </div>
        </div>
    );
}

export default observer(C2banner);